<template>
  <Manage>
    <template #upCard>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="运输任务编号">
              <el-input v-model="page.transportTaskId" placeholder="请输入运输任务编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构">
              <!-- <el-select style="width:100%" clearable /> -->
              <Treeselect
                v-model="page.startAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择起始地机构"
                :append-to-body="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构">
              <Treeselect
                v-model="page.endAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请输入目的地机构"
                :append-to-body="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="回车时间">
              <el-date-picker
                v-model="backTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
                style="width:100%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用">
              <el-select v-model="page.isAvailable" style="width:100%" clearable>
                <el-option :value="null" label="全部" />
                <el-option :value="true" label="可用" />
                <el-option :value="false" label="不可用" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #downCard>
      <el-table :data="truckReturnTable" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
        <el-table-column prop="transportTaskId" label="运输任务编号" />
        <el-table-column prop="startAgencyName" label="起始地机构" />
        <el-table-column prop="endAgencyName" label="目的地机构" />
        <el-table-column prop="transportOrderNumber" label="运单数量" />
        <el-table-column prop="outStorageTime" label="出车时间" />
        <el-table-column prop="intoStorageTime" label="回车时间" />
        <el-table-column prop="licensePlate" label="车牌号码" />
        <el-table-column prop="isAvailable" label="车辆是否可用">
          <template #default="{row}">
            <div :class="row.isAvailable?'green-status':'red-status'">{{ row.isAvailable?'可用':'停用' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template #default="{row}">
            <a href="javascript:void(0);" style="color:#419eff;" @click="toRegisterInfo(row.id)">查看</a>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </Manage>
</template>

<script>

import { getOrgizationTree } from '@/api/ogization'
import { initTruckReturn } from '@/api/transit'
export default {
  data() {
    return {
      props: {
        label: 'name'
      },
      tree: [],
      page: {
        page: 1,
        pageSize: 10,
        transportTaskId: null,
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: null,
        intoStorageEndTime: null,
        isAvailable: null
      },
      truckReturnTable: [],
      backTime: []
    }
  },
  created() {
    this.initTree()
    this.getTruckReturn()
  },
  methods: {
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 回车表格
    async getTruckReturn() {
      this.page.intoStorageStartTime = this.backTime[0]
      this.page.intoStorageEndTime = this.backTime[1]
      const res = await initTruckReturn(this.page)
      // console.log(res)
      this.truckReturnTable = res.items
    },
    // 跳转回单查看
    toRegisterInfo(id) {
      this.$router.push({
        path: '/transit/car-register-info',
        query: {
          id
        }
      })
    },
    // 搜索
    search() {
      this.getTruckReturn()
    },
    reset() {
      this.backTime = []
      this.page = {
        page: 1,
        pageSize: 10,
        transportTaskId: null,
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: null,
        intoStorageEndTime: null,
        isAvailable: null
      }
      this.getTruckReturn()
    }
  }
}
</script>

<style lang="scss" scoped>
.vue-treeselect__menu-container{
  z-index: 999;
}
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
</style>
